<template>
  <div class="commission">
        <Breadcrumb :pathContent="content"/>
        <div class="commission-content">
          <el-form>
            <el-form-item>
                <div class="supplier-select">
                    <el-form-item label="供应商">
                        <el-select v-model="sendData.suppliersId" placeholder="请选择" @change="suppliersChange">
                            <el-option
                            v-for="item in suppliersAll"
                            :key="item.id"
                            :label="item.suppliersCompany"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="hotel-select">
                    <el-form-item label="酒店">
                        <el-select v-model="sendData.hotelId" placeholder="请选择" @change="hotelsChange">
                            <el-option
                            v-for="item in hotelAll"
                            :key="item.id"
                            :label="item.hotelName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="room-select">
                    <el-form-item label="物理房型">
                        <el-select v-model="sendData.roomId" placeholder="请选择" @change="roomChange">
                            <el-option
                            v-for="item in roomAll"
                            :key="item.id"
                            :label="item.roomName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="batch-button">
                    <el-form-item>
                        <el-form-item>
                            <el-button type="text" @click="centerDialogVisible = true">批量修改</el-button>
                        </el-form-item>
                    </el-form-item>
                </div>
                <!-- <div class="search-button">
                    <el-form-item>
                        <el-button type="primary"><i class="el-icon-search"></i></el-button>
                    </el-form-item>
                </div> -->
                <div class="edit-dialog">
                    <el-dialog title="佣金设置" :visible.sync="centerDialogVisible" width="12%" @close="patchEditClose">
                        <div class="edit-content">
                            <div class="content-left">
                                <el-select v-model="sendData.calculate" placeholder="" style="width: 100%;">
                                    <el-option label="+" value="+"></el-option>
                                    <el-option label="-" value="-"></el-option>
                                    <el-option label="*" value="*"></el-option>
                                </el-select>
                            </div>
                            <div class="content-right">
                                <el-input v-model="sendData.commision" placeholder="请输入金额" style="width: 100%;"></el-input>
                            </div>
                            <div class="content-footer">
                                <el-button type="primary" @click="save">保存</el-button>
                                <el-button @click="centerDialogVisible = false">取消</el-button>
                            </div>
                        </div>
                    </el-dialog>
                </div>
            </el-form-item>
            <el-form-item>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    max-height="450">
                    <el-table-column
                    prop="saleName"
                    label="售卖房型"
                    width="260">
                    </el-table-column>
                    <el-table-column
                    label="佣金"
                    width="200">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">
                          <label v-if="scope.row.operation === '+'">+</label>
                          <label v-if="scope.row.operation === '-'">-</label>
                          {{ scope.row.commision }}
                          <label v-if="scope.row.operation === '*'">%</label>
                      </span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    max-width="100">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="roomSave(scope.$index, tableData)"
                        type="text"
                        size="small">
                        <i class="fa fa-pencil" style="margin-right: 5px;"></i>
                        修改
                        </el-button>
                    </template>
                    </el-table-column> 
                </el-table>
            </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
import { getCommision } from '../../../public/js/setting'
const Breadcrumb = () => import('@/components/common/Breadcrumb')

export default {
  name: 'Message',
  data () {
    return {
      content: {
        firstTitle: '设置',
        secondTitle: '佣金设置',
        type: 'close'
      },
      centerDialogVisible: false,
      tableData: [],
      suppliersAll: [],
      hotelAll: [],
      roomAll: [],
      sendData: {}
    }
  },
  created () {
    getCommision(this).then(res => {
      this.suppliersAll = res.data.choose.suppliersAll
    })
  },
  methods: {
    patchEditClose () {
      this.sendData.calculate = null
      this.sendData.commision = null
    },
    suppliersChange (val) {
      this.hotelAll = []
      this.sendData.hotelId = null
      this.sendData.suppliersId = val
      this.dataChange(this.suppliersAll, val, 'hotelAll')
    },
    hotelsChange (val) {
      this.sendData.hotelId = val
      this.dataChange(this.hotelAll, val, 'roomAll')
      this.getCommisionData()
    },
    roomChange (val) {
      this.sendData.roomId = val
      this.getCommisionData()
    },
    save () {
      getCommision(this.sendData).then(res => {
        if (res.data.errCode === 0) {
          this.tableData = res.data.saleAll
          this.$message.success('修改成功')
        }
      })
      this.centerDialogVisible = false
    },
    roomSave (index) {
      this.centerDialogVisible = true
      this.sendData.commisionID = this.tableData[index].id
    },
    getCommisionData () {
      getCommision(this.sendData).then(res => {
        if (res.data.errCode === 0) this.tableData = res.data.saleAll
      })
    },
    dataChange (obj, val, key) {
      this.roomAll = []
      this.sendData.roomId = null
      obj.forEach(item => {
        if (key === 'hotelAll') {
          if (item.id === val) {
            this.hotelAll = item[key]
          }
        }
        if (key === 'roomAll') {
          if (item.id === val) {
            this.roomAll = item[key]
          }
        }
      })
    }
  },
  components: {
    Breadcrumb
  }
}
</script>
<style lang="scss" scoped>
    .commission {
        .el-form-item {
            margin-bottom: 10px;
        }
        .supplier-select, .hotel-select, .room-select, .batch-button, .search-button {
            float: left;
            margin-right: 20px;
        }
        .supplier-select, .hotel-select, .room-select {
            width: 15%;
        }
        .batch-button, .search-button {
            width: 5%;
        }
        .batch-button {
            button {
              font-size: 12px;
            }
        }
        .search-button {
            button {
              padding: 9px 16px;
            }
        }
        
    }
    .edit-dialog {
        .edit-content {
            overflow: hidden;
            min-height: 100px;
            .content-left, .content-right {
                float: left;
            }
            .content-left {
                width: 32%;
                margin-right: 10px;
            }
            .content-right {
                width: 60%;
            }
            .content-footer {
                margin-top: 35%;
                button {
                    font-size: 12px;
                    padding: 10px 15px;
                }
            }
        }
    }
    .commission-content {
        margin-top: 20px;
        background-color: white;
        padding: 20px;
        position: relative;
        .el-form {
            .el-form-item {
                .el-form-item__content {
                    line-height: 3;
                    .el-dropdown {
                        float: left;
                        margin-right: 30px;
                    }
                    .el-input {
                      float: left;
                      width: 300px;
                      input {
                        height: 34px;
                        line-height: 34px;
                    }
                  }
                }
            }
        }
    }
</style>
